<template>
  <div class="store-shelf">
    <!-- {{shelfCategory}} -->
    <shelf-title :title="this.shelfCategory.groupName"></shelf-title>
    <scroll class="store-shelf-scroll-wrapper"
            :top="0"
            :bottom="scrollBottom"
            @onScroll="onScroll"
            ref="scroll"
            v-if="ifShowList">
      <!-- 书架列表分组的书籍列表shelfCategory在vuex属性中 -->
      <shelf-list :top="84" :data="shelfCategory.list"></shelf-list>
      <!-- {{在mixin里获取shelfCategory数据，这里mounted调用}} -->
    </scroll>
    <!-- 没有分组列表时，显示一段话 -->
    <div class="store-shelf-empty-view" v-else>{{$t('shelf.groupNone')}}</div>
    <shelf-footer @showMyToast="showMyToast"></shelf-footer>
    <Toast v-if="showToast" :text="toastText" />
  </div>
</template>

<script>
  import { storeShelfMixin } from '../../utils/mixin'
  import ShelfTitle from '../../components/shelf/ShelfTitle'
  import ShelfList from '../../components/shelf/ShelfList'
  import ShelfFooter from '../../components/shelf/ShelfFooter'
  import Scroll from '../../components/common/Scroll'
  import { categoryList } from '../../utils/store'
  import Toast from '../../components/shelf/Toast'

  export default {
    mixins: [storeShelfMixin],
    components: {
      Scroll,
      ShelfTitle,
      ShelfList,
      ShelfFooter
    },
    data() {
      return {
        scrollBottom: 0,
        showToast: false,
        toastText: '',
        showTimer: null
        // title: ''
      }
    },
    watch: {
      isEditMode(isEditMode) {
        this.scrollBottom = isEditMode ? 96 : 0
        this.$nextTick(() => {
          // console.log('scroll', this.$refs.scroll)
          this.$refs.scroll.refresh()
        })
      },
      showToast(newVal) {
        console.log('newVal', newVal)
        if (newVal) {
          this.showTimer = setTimeout(() => {
            this.showToast = false
            this.toastText = ''
          }, 3000)
        }
      },
      // 持续显示toast文本
      toastText(newVal, oldVal) {
        console.log('oldVal', oldVal)
        // 清除延时器
        if (oldVal !== '') {
          clearTimeout(this.showTimer)
          if (newVal === '已开启离线' || newVal === 'Opened, will automatically download') {
            console.log('开启延时器')
            this.showTimer = setTimeout(() => {
              this.toastText = ''
              this.showToast = false
            }, 1000)
          }
        }
        // if (newVal) {
        //    setTimeout(() => {
        //     this.showToast = false
        //   }, 3000)
        // }
      }
    },
    computed: {
      // 当分组列表存在时，我们才能显示列表，如果不是这个其概况我们会显示一个图标
      ifShowList() {
        return this.shelfCategory.list && this.shelfCategory.list.length > 0
      }
    },
    methods: {
      onScroll(offsetY) {
        this.setOffsetY(offsetY)
      },
      showMyToast(text) {
        console.log('showMyToast', text)
        this.showToast = true
        this.toastText = text
      }
      // getShelfList()获取书架信息,将这个方法mixin里的方法
    },
    mounted() {
      // 获取分组列表，存到vuex里，重vuex变量里获取
      // console.log('分组列表名', this.$route.query.title)
      // 这个方法在mixin里面
      this.getCategoryList(this.$route.query.title)
      // this.title = this.shelfCategory.groupName
      console.log('获取到的分组下的书籍列表', this.shelfCategory)
      this.setCurrentType(2)
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";
  .store-shelf {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: white;
    .store-shelf-scroll-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 101;
    }
    .store-shelf-empty-view {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      font-size: px2rem(28);//14
      color: #333;
      @include center
    }
  }
</style>
